<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-on:click="resetdata">{{ message }}</div>
    <br>
    指令：v-once
    <br>
    <span v-once>This will never change: {{ message  }}</span>
    <div v-html="message"></div>
    <input type="checkbox" :value="true" v-model="checkboxvalue">
    <span v-showcheck="{ color: 'white', text: 'hello!' }"></span>
    {{checkboxvalue}}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
    Vue.directive(
            'showcheck', {
//        inserted: function (el, binding, vnode) {
//            console.log(binding.value.color) // => "red"
//            console.log(binding.value.text)  // => "hello!"
//
//        },
                update: function (el, binding) {
                    console.log(binding.value.color) // => "red"
                    console.log(binding.value.text)  // => "hello!"
                }
            }
    )
    new Vue({
        el: '#app',
        data: {
            message: 'Hello World!',
            checkboxvalue: [true]
        },
        methods: {
            resetdata: function () {
                this.message = "<b>change</b>"
            }
        }
    });
</script>
</body>
</html>
